useCreateListingModal

Hook for managing the create listing modal interface for collectible sales

Import

import { useCreateListingModal } from "@0xsequence/marketplace-sdk/react";

Usage

Make sure you have followed the Getting Started guide to get the collection address and chainId.

Examples

Basic Listing Creation

Example of implementing a basic listing creation using the useCreateListingModal hook:

This example uses the useCollectible and useBalanceOfCollectible hooks from marketplace-sdk to verify ownership and get collectible details.

export default function BasicListingExample() {
  const { address: accountAddress } = useAccount();
  const { data: marketplaceConfig, isLoading: isMarketplaceConfigLoading } =
    useMarketplaceConfig();

  const collection = marketplaceConfig?.market.collections[0];
  const chainId = collection?.chainId as number;
  const collectionAddress = collection?.itemsAddress as Address;
  const collectibleId = '0';
  const orderbookKind = OrderbookKind.sequence_marketplace_v2;

  // Get collectible metadata
  const {
    data: collectible,
    isLoading: isLoadingCollectible,
    isError: isErrorCollectible,
  } = useCollectible({
    chainId,
    collectionAddress,
    collectibleId,
  });

  // Check if user owns the collectible
  const {
    data: balance,
    isLoading: isLoadingBalance,
    isError: isErrorBalance,
  } = useBalanceOfCollectible({
    collectionAddress,
    collectableId: collectibleId,
    userAddress: accountAddress as Address,
    chainId,
    query: {
      enabled: !!accountAddress,
    },
  });

  const { show: showCreateListingModal } = useCreateListingModal({
    onSuccess: ({ hash, orderId }) => {
      console.log('Listing created successfully', { hash, orderId });
    },
    onError: (error) => {
      console.error('Listing creation failed:', error.message);
    },
  });

  const handleCreateListing = () => {
    if (!collectible || !balance || Number(balance) === 0) return;

    showCreateListingModal({
      chainId,
      collectionAddress,
      collectibleId,
      orderbookKind,
    });
  };

  const isOwner = balance && Number(balance) > 0;
  const isLoading = isLoadingCollectible || isLoadingBalance;
  const hasError = isErrorCollectible || isErrorBalance;

  return (
    <div style={{ padding: '20px' }}>
      <h3>Create Listing</h3>

      {collectible && (
        <div style={{ marginBottom: '16px' }}>
          <p>Name: {collectible.name}</p>
          <p>Collectible ID: {collectibleId}</p>
          <p>Owned: {balance?.balance || '0'}</p>
        </div>
      )}

      <button
        type="button"
        onClick={handleCreateListing}
        disabled={isLoading || hasError || !isOwner || !accountAddress}
        style={{
          backgroundColor: isOwner ? '#007bff' : '#6c757d',
          color: 'white',
          border: 'none',
          padding: '12px 24px',
          borderRadius: '8px',
          cursor: isOwner ? 'pointer' : 'not-allowed',
        }}
      >
        {isLoading
          ? 'Loading...'
          : !accountAddress
            ? 'Connect Wallet'
            : !isOwner
              ? "You don't own this collectible"
              : 'Create Listing'}
      </button>
    </div>
  );
}

Parameters

The hook accepts an optional callbacks object with the following properties:

interface ModalCallbacks {
  onSuccess?: ({ hash, orderId }: { hash?: Hash; orderId?: string }) => void;
  onError?: (error: Error) => void;
  successActionButtons?: Array<{ label: string; action: () => void }>;
}

Parameter	Type	Description
callbacks.onSuccess	({ hash, orderId }: { hash?: Hash; orderId?: string }) => void	Optional callback function called when the listing is created successfully
callbacks.onError	(error: Error) => void	Optional callback function called when an error occurs during listing creation
callbacks.successActionButtons	Array<{ label: string; action: () => void }>	Optional array of action buttons to show on success

Return Type

The hook returns an object with the following methods:

{
  show: (args: ShowCreateListingModalArgs) => void
  close: () => void
}

Methods

show

(args: ShowCreateListingModalArgs) => void

Opens the create listing modal with the specified parameters.

interface ShowCreateListingModalArgs {
  collectionAddress: Address;
  chainId: number;
  collectibleId: string;
  orderbookKind?: OrderbookKind;
}

Parameter	Type	Required	Description
collectionAddress	Address	Yes	The contract address of the collection
chainId	number	Yes	The blockchain network ID (e.g., 1 for Ethereum, 137 for Polygon)
collectibleId	string	Yes	The collectible ID of the collectible to list
orderbookKind	OrderbookKind	No	The orderbook type to use (defaults to sequence_marketplace_v2)

close

() => void

Closes the create listing modal.

Notes

The useCreateListingModal hook provides a convenient way to manage the create listing modal interface for collectible sales. It handles:

• Opening and closing the modal
• Managing the listing creation flow state
• Price and quantity input validation
• Expiration date selection
• Error handling and success callbacks
• Transaction approval and execution steps
• Support for different orderbook types

Prerequisites

Before using this hook, ensure:

1. User Authentication: The user must be connected with a wallet
2. Ownership Verification: Use hooks like useBalanceOfCollectible to verify the user owns the collectible
3. Collectible Data: Use useCollectible to get metadata for the collectible being listed
4. Network Configuration: Ensure the marketplace is configured for the target chain

Related Hooks

• useCollectible - Get collectible metadata
• useBalanceOfCollectible - Check ownership
• useInventory - Get user’s collectibles
• useListListingsForCollectible - Get existing listings